<template>
  <div class="brand-components component-shop-process-brand">
    <div class="content">
      <!-- 左边 -->
      <div class="left-box">
        <!-- 搜索 -->
        <div class="search-box">
          <input
            v-model="keyword"
            class="search-input"
            :placeholder="$t('product.pleaEntBraName')"
          >
          <div
            class="search-btn"
            @click="searchBrand"
          >
            <el-icon><Search /></el-icon>
          </div>
        </div>
        <!-- 平台全部品牌列表 -->
        <div class="brand-box">
          <div
            v-if="allBrandList.length"
            class="brand-list"
          >
            <div
              v-for="(item, index) in allBrandList"
              :key="index"
              class="brand-item"
              :class="{'active':item.isSelected===true}"
              @click="addBrand(item, index)"
            >
              <el-tooltip
                :content="item.name"
                placement="right"
                :show-after="200"
                effect="light"
              >
                <span class="brand-name">{{ item.name }}</span>
              </el-tooltip>
            </div>
          </div>
          <div
            v-if="!allBrandList.length"
            class="brands-empty"
          >
            暂无数据
          </div>
        </div>
      </div>

      <!-- 右边-已选品牌+自定义品牌 -->
      <div class="right-box">
        <!-- 选择的平台品牌 -->
        <div class="table-box big-tb main-container">
          <div class="table-con">
            <el-table
              :data="signBrandList"
              header-cell-class-name="table-header"
              style="width: 100%"
            >
              <el-table-column
                prop="name"
                :label="$t('shopProcess.brandName')"
              >
                <template #default="scope">
                  <span class="table-cell-text">{{ scope.row.name }}</span>
                </template>
              </el-table-column>
              <el-table-column
                prop="firstLetter"
                :label="$t('shopProcess.firstLetter')"
                align="center"
              />
              <el-table-column
                prop="imgUrl"
                :label="$t('shopProcess.brandLogo')"
              >
                <template #default="scope">
                  <img-show
                    :src="scope.row.imgUrl"
                    :img-style="{width:'57px',height:'57px'}"
                  />
                </template>
              </el-table-column>
              <el-table-column
                prop="qualifications"
                :label="$t('shopProcess.brandQualifications')"
                width="230"
              >
                <template #default="scope">
                  <div
                    :key="scope.row.qualifications"
                    class="business-qual"
                  >
                    <imgs-upload
                      v-model="scope.row.qualifications"
                      :limit="2"
                      :prompt="false"
                    />
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="address"
                :label="$t('remindPop.operation')"
                align="center"
              >
                <template #default="scope">
                  <el-button
                    link
                    @click="deleteBrand(scope.row.brandId, scope.$index)"
                  >
                    {{ $t('remindPop.delete') }}
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- /选择的平台品牌 -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

const props = defineProps({
  brandSigningList: {
    type: Array,
    default () {
      return []
    }
  }
})
const emit = defineEmits(['getSignBrandList'])

// 已选品牌
// 搜索品牌关键字
const keyword = ref('')

const signBrandList = ref(props.brandSigningList || [])
watch(() => signBrandList.value, () => {
  emit('getSignBrandList', signBrandList.value)
})

onMounted(() => {
  getPlatformBrand()
})

/**
 * 获取平台全部品牌
 */
const getPlatformBrand = () => {
  http({
    url: http.adornUrl('/platform/brand/list'),
    method: 'get',
    params: http.adornParams({ name: keyword.value })
  }).then(({ data }) => {
    brandEcho(data, signBrandList.value)
  })
}

// 全部品牌列表
const allBrandList = ref([])
/**
 * 左侧回显选中品牌或已签约品牌
 * @param {Array} allBrandListPar 全部品牌
 * @param {Array} signBrandListPar 选中品牌和已签约品牌
 */
const brandEcho = (allBrandListPar, signBrandListPar) => {
  allBrandListPar.forEach(item => {
    item.isSelected = false
  })
  if (signBrandListPar.length > 0 && allBrandListPar.length > 0) {
    for (let i = 0; i < signBrandListPar.length; i++) {
      for (let j = 0; j < allBrandListPar.length; j++) {
        if (signBrandListPar[i].brandId === allBrandListPar[j].brandId) {
          allBrandListPar[j].isSelected = true
          break
        }
      }
    }
  }
  allBrandList.value = allBrandListPar
}

/**
 * 搜索品牌
 */
const searchBrand = () => {
  getPlatformBrand()
}

/**
 * 选中添加品牌
 */
const addBrand = (brandObj, index) => {
  const length = signBrandList.value.length
  if (length >= 50) {
    ElMessage.warning($t('shopProcess.brandMaxLimitTips'))
  } else {
    if (brandObj.isSelected === false) {
      signBrandList.value.push(brandObj)
    }
    allBrandList.value[index].isSelected = true
  }
}

/**
 * 删除选中品牌
 * @param {Number} id 品牌id
 * @param {Number} index 选中品牌列表索引
 */
const deleteBrand = (id, index) => {
  // 去除选中样式
  allBrandList.value.forEach(brandItem => {
    if (brandItem.brandId === id) {
      brandItem.isSelected = false
    }
  })
  signBrandList.value.splice(index, 1)
}

</script>

<style lang="scss" scoped>
@use "index";
</style>
